<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 10px;
      height: 30px;
      background: #000;
    }
  </style>
</head>

<body>
  <input type="file" class="file" />
  <div class="bar"></div>
  <script>
    // var file = document.getElementById('file')

    // file.onchange = function () {
    //   // 创建空表单对象
    //   var formData = new FormData();
    //   // 将用户选择的二进制文件追加到表单对象中
    //   formData.append('attrName', this.files[0]);
    //   // 配置ajax对象，请求方式必须为post
    //   xhr.open('post', 'www.example.com');
    //   xhr.send(formData);
    // }
    // file.onchange = function () {
    //   // 文件上传过程中持续触发onprogress事件
    //   xhr.upload.onprogress = function (ev) {
    //     // 当前上传文件大小/文件总大小 再将结果转换为百分数
    //     // 将结果赋值给进度条的宽度属性 
    //     bar.style.width = (ev.loaded / ev.total) * 100 + '%';
    //   }
    // }
    let file = document.querySelector('.file');
    let bar = document.querySelector('.bar');
    new xhr = new XMLHttpRequest();
    file.onchange = function () {
      let formData = new FormData();
      xhr.open('post', 'www.example.com');
      formData.append('attr', this.file[0]);
      xhr.upload.onprogress = function (e) {
        console.log(e);
        bar.style.width = (e.loaded / e.total) * 100 + '%';
      }
      xhr.send(formData)
    }

  </script>
</body>

</html>